<template>
  <!-- 吃啥摇啥 -->
  <div class="container">
    <div class="top">
      <div class="search flex">
        <input
          class="search-inp"
          v-model="keyword"
          type="text"
          placeholder="输入想吃的"
        />
        <div class="seach-btn flex btn" @click="search('')">搜索</div>
        <div class="seach-btn flex btn" @click="random">
          <img src="@/assets/image/touzi.gif" alt="" />
        </div>
      </div>
      <div class="recommend">
        <div
          class="recommend-item btn"
          v-for="(item, index) in recommendList"
          :key="index"
          @click="search(item.name)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="content" ref="content">
      <div class="food">
        <div class="food-item" v-for="(item, index) in foodList" :key="index">
          {{ item.name }}
        </div>
        <div class="flex no-data" v-if="loadingEnd">没有更多了</div>
      </div>
    </div>
    <div class="pop flex" @click="closePop" v-if="showPop">
      <div class="prize flex" :class="[{ close: closeActive }]">
        <img class="prize-img" src="@/assets/image/prize.png" alt="" />
        <div class="prize-tip">恭喜你获得</div>
        <div class="prize-info" @click.stop="goShop">{{ prize.name }}</div>

        <!-- <div class="prize-btn btn" @click.stop="goShop">去店里</div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();
onMounted(() => {
  getLocation().then((userData) => {
    userLocation = userData;
    search();
  });

  document.title = "选个想吃的";

  // content.addEventListener("scroll", (data) => {
  //   if (content.scrollTop + content.clientHeight + 50 > content.scrollHeight) {
  //     if (loadingCtx) {
  //       return;
  //     }
  //     console.log("触底加载");
  //     loadingCtx = true;
  //     getFoods();
  //     setTimeout(() => [(loadingCtx = false)], 500);
  //   }
  // });
});
let content = $ref(null);
let loadingCtx = $ref(false);

let userLocation = $ref([]);
function getLocation() {
  return new Promise((resolve) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((data) => {
        console.log(data);
        const lat = data.coords.latitude;
        const lng = data.coords.longitude;
        AMap.convertFrom([lng, lat], "gps", function (status, result) {
          if (result.info === "ok") {
            var result = result.locations[0]; // Array.<LngLat>
            resolve(result);
          }
        });
      });
    }
  });
}

let foodList = $ref([]);
let loadingEnd = $ref(false);
let page = $ref(1);
let keyword = $ref("");
function getFoods() {
  if (loadingEnd) {
    return;
  }
  let placeSearch = new AMap.PlaceSearch({
    type: "餐饮服务", // 兴趣点类别
    pageSize: 50,
    pageIndex: page,
  });
  page++;
  placeSearch.searchNearBy(
    keyword || "美食",
    userLocation,
    750,
    function (status, result) {
      if (status == "no_data") {
        loadingEnd = true;
        return;
      } else {
        getFoods();
      }
      let vdata = result.poiList;

      console.log(vdata);
      foodList = [...foodList, ...vdata.pois];
    }
  );
}

function search(data = "") {
  page = 1;
  foodList = [];
  loadingEnd = false;

  if (data) {
    keyword = data;
  }
  getFoods();
}
let showPop = $ref(false);
let prize = $ref(null);
function random() {
  console.log(foodList);
  let num = parseInt(Math.random() * foodList.length);
  console.log(num);
  prize = foodList[num];
  console.log(prize);
  showPop = true;
}
let closeActive = $ref(false);
function closePop() {
  // closeActive = true;
  // setTimeout(() => {
  //   closeActive = false;

  // }, 200);
  showPop = false;
}

function goShop() {
  $router.push("/foodDetail");
}

let recommendList = [
  {
    name: "火锅",
  },
  {
    name: "烤肉",
  },
  {
    name: "烤鱼",
  },
  {
    name: "牛蛙",
  },
  {
    name: "奶茶",
  },
  {
    name: "螺蛳粉",
  },
  {
    name: "麻辣烫",
  },
  {
    name: "炸鸡",
  },
  {
    name: "冒菜",
  },

  {
    name: "快餐",
  },
  {
    name: "汉堡",
  },
];
</script>
<style lang="scss" scoped>
@function vw($px) {
  @return calc($px / 750) * 100vw;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: #daebee;
  display: flex;
  flex-direction: column;
  .search {
    padding: vw(20);

    .search-inp {
      height: 36px;
      outline: none;
      flex: 1;
      overflow: hidden;
      border-radius: vw(12);
      border: 1px solid #f7f7fc;
      padding: 0 vw(20);
    }
    .seach-btn {
      width: vw(120);
      margin-left: vw(20);
      height: 36px;
      background-color: $theme-color;
      color: #fff;
      border-radius: vw(12);
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .recommend {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    padding: 0 vw(20) vw(20);
    white-space: nowrap;
    &::-webkit-scrollbar {
      display: none;
    }
    .recommend-item {
      display: inline-block;
      padding: vw(14) vw(30);
      background-color: #fff;
      margin-right: vw(20);
      border-radius: 99999px;
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    margin: 0 vw(20);
    border-radius: vw(12);

    .food {
      overflow: hidden;
      background-color: #fff;
      padding: vw(20) vw(20) 70px;
      .food-item {
        padding: vw(10) 0;
        font-size: vw(28);
      }
      .no-data {
        padding: vw(20) 0;
        color: #999;
      }
    }
  }
}
.pop {
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  overflow: hidden;
  .prize {
    position: relative;
    animation: show 0.35s;

    .prize-img {
      width: vw(600);
    }
    .prize-info {
      position: absolute;
      color: #f5453f;
      font-size: vw(32);
      flex-wrap: 500;
      width: vw(400);
      text-align: center;
    }
    .prize-tip {
      top: vw(114);
      position: absolute;
      z-index: 10;
      color: #fff1bc;
    }

    .prize-btn {
      position: absolute;
      bottom: vw(70);
      background-color: #fff1bc;
      color: #f5453f;
      font-weight: 500;
      padding: vw(14) vw(30);
      border-radius: vw(10);
    }
  }
  .close {
    animation: closea 0.25s infinite !important;
  }
}

@keyframes closea {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.4);
  }
}

@keyframes show {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}
</style>
